<template>
  <div>
    <div class="login"><img src="../../assets/images/image/xxhdpi/user_bg.png" style="width: 100%;
    height: 100%;" alt=""></div>
    <div class="personal">
      <img class="img" :src="img" alt="" @error="handleerror" />
      <p>{{ name }}</p>
    </div>
    <div class="title">
      <navtitle title="他发布的病友圈"></navtitle>
    </div>
    <div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <div
          v-for="(item, ind) in list"
          :key="ind"
          @click="$router.push(`/detail/${item.sickCircleId}`)"
        >
          <div class="listItem">
            <div class="title">
              <h3>{{ item.title }}</h3>
              <div class="HB">
                <img
                  src="../../assets/images/image/hdpi/h_currency.png"
                  alt=""
                />
                <span>{{ item.amount }}</span>
              </div>
            </div>
            <p class="time"></p>
            <div class="detail">{{ item.detail }}</div>
            <ul class="collect">
              <li>
                <span>建议</span>
                <span>{{ item.commentNum }}</span>
              </li>
              <li>
                <span>收藏</span>
                <span>{{ item.collectionNum }}</span>
              </li>
            </ul>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import navtitle from "../../components/navtitle/index.vue";
import { getPatientSickCircleList } from "../../api/index.ts";
import {useRoute} from 'vue-router' 
export default defineComponent({
  components: {
    navtitle,
  },
  setup() {
    const img = ref("https://img1.baidu.com/it/u=3034239006,2468054389&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1697907600&t=14846c0a54327c5c94fd7e4edf218c8a");
    const patientUserId = ref(1);
    const page = ref(1);
    const count = ref(5);
    const list = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const name = ref("");
    const route = useRoute()
    const handleerror = (e) => {
      e.target.src = img.value;
    };

    const onLoad = async () => {
      loading.value = true; // 开始加载更多数据
      const { data: res } = await getPatientSickCircleList({
        patientUserId: patientUserId.value,
        page: page.value,
        count: count.value,
      });
      console.log(res);
      list.value.push(...res.result); // 更新数据列表
      page.value++; // 更新页码
      finished.value = res.result.length < count.value; // 检查是否还有更多数据
      loading.value = false; // 完成加载更多数据
    };

    onMounted(() => {
      const { id: routeId, name: routeName } = route.params;
      patientUserId.value = routeId;
      name.value = routeName;
    });

    return {
      img,
      patientUserId,
      page,
      count,
      list,
      loading,
      finished,
      name,
      handleerror,
      onLoad,
    };
  },
});
</script>

<style lang="scss" scoped>
.login {
  width: 100vw;
  height: 230px;
  background-size: 100vw 230px;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-image: url("../../../assets/images/image/hdpi/user_bg.png");
}
.personal {
  width: 100%;
  height: 48px;
  background-color: #fff;
  display: flex;

  .img {
    transform: translate(30px, -22px);
    border-radius: 50%;
    top: -25px;
    width: 50px;
    height: 50px;
  }
  p {
    margin-left: 36px;
    font-size: 14px;
    color: #333;
  }
}
.title {
  margin-top: 6px;
}

.listItem {
  box-sizing: border-box;
  width: 100%;
  margin-top: 4px;
  padding: 20px;
  background-color: white;

  .title {
    display: flex;
    justify-content: space-between;
    h3 {
      font-size: 16px;
      color: #333;
    }
    .HB {
      display: flex;
      justify-content: space-around;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
      }
      span {
        margin-left: 6px;
        font-size: 13px;
        color: #d92109;
      }
    }
  }

  .time {
    font-size: 10px;
    color: #333;
    margin: 10px 0 8px 0;
  }

  .detail {
    font-size: 12px;
    color: #333;
    line-height: 20px;
  }

  .collect {
    display: flex;
    justify-content: right;
    margin-top: 16px;
    font-size: 10px;
    color: #333;

    li {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 14px;

      span {
        margin-left: 6px;
      }
    }
  }
}
</style>
